<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击我</button>
  <div class="exchange"></div>
  <script>
    // 模板字符串 
    // ES5 ：字符串 拼接  单双引号的混用 。
    // var str = "我是名字是\"张三\",我的年龄是\"22\"";
    // console.log(str);

    // var htmlStr = "<div>"+
    //             "我是div"+
    //             "</div>"
    //     document.body.innerHTML = htmlStr;

    // ES6 模板字符串 ： 定义 `字符串`
    // let name = "张三";
    // let age = 20;


    // 插值表达式 可以解析js里的变量 ，还可以解析 有返还值的表达式；比如三元表达式
    var a = 1 + 1;
    var flag = true;
    var myname = flag?'张三':"李四"; 
    function fn(){
        return "hello";
    }
    let str = `我${1+4}的名字是${flag?'张三':"李四"}，我的年龄是${fn()}`;
    console.log(str);


    // 模板字符串 应用
    // let btn = document.querySelector("button");
    // let flag = true;
    // btn.onclick = function () {
    //   flag = !flag;
    //   console.log(flag);
    //   var divele = `<div style="color:${flag ? 'skyblue' : 'blue'}">我是div</div>`;
    //   document.querySelector(".exchange").innerHTML = divele;
    // }
  </script>
</body>

</html>